<template>
	<view class="my-wrapper">
		<view class="info" :style="'background:url('+imgUrl+');background-size:100%'">
			<!-- <image class="info-bg" src="../../static/images/mine-bg.png" mode="scaleToFill"></image> -->
			<view class="content flex">
				<view class="avatar">
					<image :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="des flex">
					<view class="name">{{userInfo.userName}}</view>
					<!-- <view class="adr">某某市某某区祥云路2号</view> -->
				</view>
			</view>
		</view>
		<view class="items">
			<view class="item flex" @click="addCustom" v-if="cusType != 3 && cusType != 1">
				<view class="l">新增客户</view>
				<view class="r">
					<uni-icons type="youjiantou" size="20" color="#666"></uni-icons>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="item flex">
				<view class="l">版本显示</view>
				<view class="r">{{version}}</view>
			</view>
			<!-- #endif -->
			
			<view class="item flex" @click="cleanStorage">
				<view class="l">清除缓存</view>
				<view class="r">
					<uni-icons type="youjiantou" size="20" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex" @click="changePass">
				<view class="l">修改密码</view>
				<view class="r">
					<uni-icons type="youjiantou" size="20" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex" @click="loginOut">
				<view class="l">退出登陆</view>
				<view class="r">
					<uni-icons type="youjiantou" size="20" color="#666"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	  mapState,
	  mapMutations
	 } from 'vuex'
	import uniIcons from '@/components/uni-icon/uni-icon.vue'
	import Request from '@/request/request.js'
	export default {
		components:{
			uniIcons
		},
		data() {
			return {
				imgUrl:'../../static/images/mine-bg.png',
				version:''
			}
		},
		onLoad() {
			//#ifdef APP-PLUS
				this.version = (plus.runtime.version).split('.').join('.') || '1.0.3'
			//#endif
		},
		methods: {
			getInfo(){
				Request({})
			},
			cleanStorage(){
				try{
					uni.removeStorageSync('loginName');
					 uni.removeStorageSync('password');
					uni.showToast({
						title:'缓存清理成功',
						duration:1000
					})
				}catch(e){
					
				}
			},
			addCustom(){
				// 新增客户资料
				uni.navigateTo({
					url:'/pages/addCustom/addCustom'
				})
			},
			loginOut(){
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '确定退出登录?',
				    success: function (res) {
				        if (res.confirm) {
				            Request({url:'logout',method:'GET'})
							 .then(res =>{
								 if(res.code == 0){
									 uni.showToast({
									 	title:'退出登录成功!',
										icon:'none',
									 	duration:1000
									 })
									 try {
									     uni.removeStorageSync('loginName');
										  uni.removeStorageSync('password');
										 uni.removeStorageSync('authorization');
										 setTimeout(() => {
											 uni.reLaunch({
											 	url:'/pages/login/login'
											 })
										 },1000)
									 } catch (e) {
									     // error
									 }
								 }
							 }).catch(err => {})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			changePass(){
				uni.navigateTo({
					url:'../changePass/changePass'
				})
			}
		},
		 computed:{
		   ...mapState(['userInfo','cusType'])
		  }
	}
</script>

<style lang="less" scoped>
@borderColor:#ECECEC;
.my-wrapper{
	.info{
		width: 100%;
		height: 430rpx;
		position: relative;
		overflow: hidden;
		z-index: 99;
		box-sizing: 100%;
		.info-bg{
			// height: 431upx;
			// width: 750upx;
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
		}
		.content{
			margin: 110rpx 0 0 100rpx;
		}
		.avatar{
			height: 138rpx;
			width: 138rpx;	
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.des{
			margin-left: 28rpx;
			flex: 1;
			flex-direction: column;
			width: 0;
			font-size: 30rpx;
			color: #FFFFFF;
			padding-top: 24rpx;
			.name{
				margin-bottom: 34rpx;
			}
			.adr{
				// font-size: 32upx;
			}
		}
	}
	.items{
		border-top: 2upx solid @borderColor;
		// margin-top: 110upx;
		.item{
			// height: 110upx;
			width: 100%;
			padding: 0 40upx;
			display: flex;
			color: #333333;
			line-height: 100upx;
			background-color: #FFFFFF;
			border-bottom: 2upx solid @borderColor;
			justify-content: space-between;
		}
	}
}
</style>
